<template>
  <body>
  <div class="addExam">
    <el-form :model="addExam" ref="exam">
      <el-row>
        <el-col :span="20">
          <div class="addExam1">
            <el-row>
              <el-col :span="24">
                <el-form-item prop="examType">
                  <el-row>
                    <el-col :span="3">
                      <div class="exam">
                      <span>考试类型</span>
                      </div>
                    </el-col>
                    <el-col :span="19">
                      <div style="margin-top: 20px">
                        <el-radio-group size="mini" v-model="addExam.examType">
                          <el-radio-button :label="1" @click.native="display">普通考试</el-radio-button>
                          <el-radio-button :label="2" @click.native="display">认证考试</el-radio-button>
                          <el-radio-button :label="3" @click.native="hide">高校公开考试</el-radio-button>
                          <el-radio-button :label="4" @click.native="hide">k12公开考试</el-radio-button>
                        </el-radio-group>
                      </div>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item v-if="show" prop="clazz">
                  <el-row>
                    <el-col :span="3">
                      <span>所属班级</span>
                    </el-col>
                    <el-col :span="19">
                      <div style="margin-top: 15px;">
                        <el-select v-model="addExam.clazz" slot="prepend" placeholder="请选择" @click.native="getSelfClass">
                          <el-option v-for="item in classList" :value="item.clazz.name" :key="item.classId">{{item.clazz.name}}</el-option>
                        </el-select>
                      </div>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item v-if="show">
                  <el-row>
                    <el-col :span="3">
                      <span>所属教学进度计划</span>
                    </el-col>
                    <el-col :span="19">
                      <div style="margin-top: 15px;">
                        <el-select v-model="schedule" slot="prepend" placeholder="请选择">
                          <el-option label="餐厅名" value="1"></el-option>
                          <el-option label="订单号" value="2"></el-option>
                          <el-option label="用户电话" value="3"></el-option>
                        </el-select>
                      </div>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item v-if="show">
                  <el-row>
                    <el-col :span="3">
                      <span>课次</span>
                    </el-col>
                    <el-col :span="19">
                      <div style="margin-top: 15px;">
                        <el-select v-model="classtimes" slot="prepend" placeholder="请选择">
                          <el-option label="餐厅名" value="1"></el-option>
                          <el-option label="订单号" value="2"></el-option>
                          <el-option label="用户电话" value="3"></el-option>
                        </el-select>
                      </div>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item>
                  <el-col :span="3">
                    <small style="margin-left: -2.5rem;">考试名称</small>
                  </el-col>
                  <el-col :span="19">
                    <el-input v-model="examname" placeholder="请输入内容"></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item>
                  <el-col :span="3">
                    <small style="margin-left: -2.5rem;">考试时间</small>
                  </el-col>
                  <el-col :span="19">
                    <div class="block">
                      <el-date-picker type="daterange"></el-date-picker>
                      <!-- <el-date-picker v-model="value1" type="daterange"></el-date-picker> -->
                    </div>
                  </el-col>
                </el-form-item>
                <el-form-item>
                  <el-row>
                    <el-col :span="3">
                      <span>提交试卷的时间</span>
                    </el-col>
                    <el-col :span="19">
                      <div style="margin-top: 20px">
                        <el-radio-group v-model="Submission" size="mini">
                          <el-radio-button label="可以立即提交"></el-radio-button>
                          <el-radio-button label="等待时间结束"></el-radio-button>
                        </el-radio-group>
                      </div>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item>
                  <el-row>
                    <el-col :span="3">
                      <span>公布答案时间</span>
                    </el-col>
                    <el-col :span="19">
                      <div style="margin-top: 20px">
                        <el-radio-group v-model="Publish" size="mini">
                          <el-radio-button label="试卷提交之后"></el-radio-button>
                          <el-radio-button label="考试结束之后"></el-radio-button>
                        </el-radio-group>
                      </div>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item>
                  <el-row>
                    <el-col :span="3">
                      <span>超时提交</span>
                    </el-col>
                    <el-col :span="19">
                      <div style="margin-top: 20px">
                        <el-radio-group v-model="overtime" size="mini">
                          <el-radio-button label="可以"></el-radio-button>
                          <el-radio-button label="不可以"></el-radio-button>
                        </el-radio-group>
                      </div>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item>
                  <el-row>
                    <el-col :span="5">
                       <el-button type="primary" size="mini">提交</el-button>
                       <el-button plain size="mini">取消</el-button>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
  </body>
</template>

<script>
import http from '@/utils/HttpUtil'
export default {
  data () {
    return {
      active: {
        getSelfClass: 'LearningPlatform/manager/class/getSelfClass'
      },
      addExam: {
        examType: '1',
        clazz: ''
      },
      classList: [],
      schedule: '',
      classtimes: '',
      examname: '',
      Submission: '可以立即提交',
      Publish: '试卷提交之后',
      overtime: '可以',
      show: true
    }
  },
  components: {

  },
  methods: {
    display () {
      this.show = true
    },
    hide () {
      this.show = false
    },
    getSelfClass () {
      http.xhrGet(this, this.active.getSelfClass, null, (res) => {
        this.classList = res.data.data.list
      })
    }
  }
}
</script>

<style scoped="scoped">
 @import url("../assets/css/addExam.css");
</style>
